<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-logout-phone-container`]">
      <view class="logout-card">
        <p class="title">验证码已发送到您的手机</p>
        <p class="phone">{{ phone }}</p>
        <p class="code">验证码</p>
        <uv-code-input mode="line" size="20" v-model="code" :hairline="true" @change="change" @finish="finish"></uv-code-input>
        <p class="resend a" @click="sendPhone">{{ sendText }}</p>
        <!-- <p class="resend b" v-show="!sendText">{{ time }}秒后再次获取</p> -->
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { logoutPhone, logoutsApply, sendPhone } from './api'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      phone: '',
      code: '',
      sendText: '获取验证码',
      time: 60,
      isDisabled: true,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    await this.getPhone()
    await this.sendPhone()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {
    clearInterval(timers)
  },
  methods: {
    ...mapActions('user', ['Logout']),
    async getPhone() {
      const { data } = await logoutPhone()
      this.phone = data.phone
    },
    async sendPhone() {
      if (!this.isDisabled) {
        return
      }
      const { errcode } = await sendPhone({ phone: this.phone })
      if (errcode === 0) {
        this.isDisabled = false
        uni.$uv.toast('发送成功')
        const timers = setInterval(() => {
          this.time--
          this.sendText = this.time + '秒后再次获取'
          if (this.time <= 0) {
            this.sendText = '重新发送'
            this.time = 60
            clearInterval(timers)
          }
        }, 1000)
      }
    },
    async submit() {
      const { errcode } = await logoutsApply({ code: this.code })
      if (errcode === 0) {
        // clearInterval(timers)
        this.Logout()
        uni.$uv.toast('操作成功')
        this.$ROUTE.go('/pages/main/home')
      }
    },
    change(e) {
      //   console.log('内容改变，当前值为：' + e)
    },
    async finish(e) {
      await this.submit()
      //   console.log('输入结束，当前值为：' + e)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('logout-phone-container')} {
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 0 32rpx;
  overflow: hidden;
  .logout-card {
    width: 100%;
    background: white;
    border-radius: 16rpx;
    margin-top: 32rpx;
    overflow: hidden;
    position: relative;
    .title,
    .code {
      margin: 15px 15px 0;
      padding-bottom: 15px;
    }
    .phone {
      margin: 0 15px 0;
      padding-bottom: 15px;
      border-bottom: 1px solid #f1f1f1;
    }
    ::v-deep .uv-code-input {
      margin: 0 15px 15px;
    }
    .resend {
      position: absolute;
      bottom: 15px;
      right: 15px;
      z-index: 2;
    }
  }
}
</style>
